<div ng-init="vm.init();refresh(vm.callback);">
  <script id="opt-toolbar" type="text/ng-template">
    <div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-upload"></i> 导入 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><button class="btn btn-default btn-block" ng-click="vm.upload('doc')">文件</button></li>
          <li><button class="btn btn-default btn-block" ng-click="vm.upload('zip')">压缩包</button></li>
        </ul>
      </div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ng-disabled="!vm.node.name">
          <i class="fa fa-download"></i> 导出 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a ng-href="{{vm.node.leaf?'#!/pojo-evaluator/query' + vm.node.url:''}}" class="btn btn-default"
              ng-disabled="!vm.node.leaf" target="_blank">Query</a></li>
          <li><a ng-href="{{vm.node.leaf?'#!/pojo-evaluator/request' + vm.node.url:''}}" class="btn btn-default"
              ng-disabled="!vm.node.leaf" target="_blank">入参</a></li>
          <li><a ng-href="{{vm.node.leaf?'#!/pojo-evaluator/response' + vm.node.url:''}}" class="btn btn-default"
              ng-disabled="!vm.node.leaf" target="_blank">出参</a></li>
          <li class="divider"></li>
          <li><a ng-href="{{vm.node.leaf?'#!/markdown-editor/mockdoc' + vm.node.url:''}}" class="btn btn-default"
              ng-disabled="!vm.node.leaf" target="_blank">API文档</a></li>
          <li class="divider"></li>
          <li><button class="btn btn-default btn-block" ng-click="vm.saveAs()" ng-disabled="!vm.node.leaf">文件</button></li>
          <li><button class="btn btn-default btn-block" ng-click="vm.saveAsZip()" ng-disabled="vm.node.leaf">压缩包</button></li>
        </ul>
      </div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default" ng-disabled="vm.node.name == '' || !vm.node.leaf"
            ng-click="vm.showMockTest()"><i class="fa fa-bug"></i> 测试</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
             ng-disabled="vm.node.name == '' || !vm.node.leaf"><span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a ng-href="{{'#!/http-requester' + vm.node.url}}" target="_blank">高级测试</a></li>
        </ul>
      </div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-question"></i> 帮助 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><button class="btn btn-default btn-block" ng-click="vm.showShortcutKey()">快捷键</button></li>
          <li class="divider"></li>
          <li><a ng-href="{{vm.node.url}}" target="_blank" class="btn btn-default" ng-disabled="vm.node.url == ''">链接地址</a></li>
        </ul>
      </div>
    </div>
  </script>
  <div class="row x-view-body">
    <div class="col-md-4 x-view-line x-file-list">
      <div class="x-view-scope">
        <div class="x-tree">
          <div class="input-group x-tree-filter">
            <input id="tree-filter" type="text" class="form-control" placeholder="文件夹/文件名">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="vm.expandAll()" title="展开">
                <i class="fa fa-plus"></i></button>
              <button type="button" class="btn btn-default" ng-click="vm.collapseAll()" title="折叠">
                <i class="fa fa-minus"></i></button>
              <button type="button" class="btn btn-default" ng-click="vm.toggleFlat()" title="切换视图">
                <i class="fa fa-list"></i></button>
              <button type="button" class="btn btn-default" ng-click="vm.refresh()" title="刷新">
                <i class="fa fa-refresh"></i></button>
            </span>
          </div>
          <div class="x-tree-list">
            <ul id="mock-tree" class="ztree"></ul>
          </div>
        </div>
      </div>
    </div>
    <div class="x-move">
      <div class="x-movebar" title="调整列宽"></div>
    </div>
    <div class="x-move-zone"></div>
    <div class="col-md-8 x-file-data" ng-style="{'z-index': (vm.fullScreen ? 1030 : 500)}">
      <div class="x-view-scope" ng-class="{'x-full-screen': vm.fullScreen}" ng-show="vm.textMock != ''">
        <div class="x-editor" ng-show="!vm.preview">
          <pre id="data-editor"></pre>
        </div>
        <div class="panel panel-default x-form-editor" ng-show="vm.preview">
          <div class="panel-heading">预览与编辑
            <div class="pull-right x-toolbar">
              <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="字体大小">
                  <i class="fa fa-font"></i> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu x-font-list">
                  <li ng-repeat="size in [8, 9, 10, 12, 14, 16, 20]" ng-click="vm.handle('font', size)"
                      ng-class="{'active': size == vm.fontSize}">
                    <a href="javascript:void(0)" ng-style="{'font-size': size + 'px'}">{{size}}px</a></li>
                </ul>
              </div>
              <button class="btn btn-default btn-sm" ng-click="vm.handle('format')" title="格式化">
                <i class="fa fa-code"></i></button>
              <button class="btn btn-default btn-sm" ng-click="vm.handle('unfold')" title="全部展开">
                <i class="fa fa-plus-square-o"></i></button>
              <button class="btn btn-default btn-sm" ng-click="vm.handle('fold')" title="全部折叠">
                <i class="fa fa-minus-square-o"></i></button>
              <button class="btn btn-default btn-sm" ng-click="vm.handle('wrap')" title="自动换行">
                <i class="fa" ng-class="{'fa-toggle-on': vm.toggleWrap, 'fa-toggle-off': !vm.toggleWrap}"></i></button>
              <button class="btn btn-default btn-sm" ng-click="vm.save()"
                  ng-disabled="!(vm.status.enabled && vm.status.changed)" title="保存"><i class="fa fa-save"></i></button>
              <button class="btn btn-default btn-sm" ng-click="vm.toggleView(false)" title="退出预览与编辑">
                  <i class="fa fa-eye-slash"></i></button>
              <button class="btn btn-default btn-sm" ng-click="vm.toggleFullScreen()"
                  title="{{vm.fullScreen ? '退出全屏' : '全屏'}}"><i class="fa"
                  ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i></button>
            </div>
          </div>
          <div class="panel-body">
            <form name="frmEditor">
              <div ng-repeat="(item, value) in vm.items">
                <div class="form-group" ng-if="item == '标题'">
                  <div class="input-group">
                    <label class="input-group-addon">{{item}}：</label>
                    <input type="text" class="form-control" ng-model="vm.items[item]" required>
                  </div>
                </div>
                <div class="form-group" ng-if="item == 'URL'">
                  <div class="input-group">
                    <label class="input-group-addon">{{item}}：</label>
                    <input type="text" class="form-control" ng-model="vm.items[item]" required>
                  </div>
                </div>
                <div class="form-group" ng-if="item == 'Method'">
                  <div class="input-group">
                    <label class="input-group-addon">{{item}}：</label>
                    <select class="form-control" ng-model="vm.items[item]">
                      <option value="GET" selected>GET</option>
                      <option value="POST">POST</option>
                      <option value="PUT">PUT</option>
                      <option value="PATCH">PATCH</option>
                      <option value="DELETE">DELETE</option>
                    </select>
                  </div>
                </div>
                <div class="form-group" ng-if="item == 'Headers'">
                  <label>{{item}}：</label>
                  <item-editor options="{'mode': 'ace/mode/hjson', 'fontSize': vm.fontSize, 'wrap': vm.toggleWrap}"
                      attributes="{'id': vm.itemIdOffset, 'items': vm.items, 'item': item}"/>
                </div>
                <div class="form-group" ng-if="['备注', '错误'].indexOf(item) != -1">
                  <label>{{item}}：</label>
                  <item-editor options="{'fontSize': vm.fontSize, 'wrap': vm.toggleWrap}"
                      attributes="{'id': vm.itemIdOffset, 'items': vm.items, 'item': item}"/>
                </div>
                <div class="form-group" ng-if="['Query', '入参', '出参'].indexOf(item) != -1">
                  <label>{{item}}：</label>
                  <item-editor options="{'mode': 'ace/mode/' + (vm.extname == '.json' ? 'hjson' : 'xml'),
                      'fontSize': vm.fontSize, 'wrap': vm.toggleWrap}"
                      attributes="{'id': vm.itemIdOffset, 'items': vm.items, 'item': item}"/>
                </div>
                <div class="form-group" ng-if="vm.keywords.indexOf(item) == -1">
                  <div class="input-group">
                    <label class="input-group-addon">{{item}}：</label>
                    <input type="text" class="form-control" ng-model="vm.items[item]">
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="data-editor-tools">
    <div class="x-editor-tool" style="width:505px">
      <div class="x-toolbar btn-group">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="字体大小">
            <i class="fa fa-font"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu x-font-list">
            <li ng-repeat="size in [8, 9, 10, 12, 14, 16, 20]" ng-click="vm.handle('font', size)"
                ng-class="{'active': size == vm.fontSize}">
              <a href="javascript:void(0)" ng-style="{'font-size': size + 'px'}">{{size}}px</a></li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="文本编辑">
            <i class="fa fa-file-text-o"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu x-font-list">
            <li ng-click="vm.handle('edit', 'headers')"><a href="javascript:void(0)">Headers</a></li>
            <li ng-click="vm.handle('edit', 'query')"><a href="javascript:void(0)">Query</a></li>
            <li ng-click="vm.handle('edit', 'parameters')"><a href="javascript:void(0)">入参</a></li>
            <li ng-click="vm.handle('edit', 'errors')"><a href="javascript:void(0)">错误</a></li>
            <li ng-click="vm.handle('edit', 'comments')"><a href="javascript:void(0)">备注</a></li>
          </ul>
        </div>
        <button class="btn btn-default" ng-click="vm.handle('undo')" ng-disabled="!vm.canUndo" title="撤销">
          <i class="fa fa-undo"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('redo')" ng-disabled="!vm.canRedo" title="重做">
          <i class="fa fa-repeat"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('format')" title="格式化"><i class="fa fa-code"></i></button>
        <button class="btn btn-default" ng-click="vm.showSearchbox()" title="查找/替换">
          <i class="fa fa-search"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('unfold')" title="全部展开">
          <i class="fa fa-plus-square-o"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('fold')" title="全部折叠">
          <i class="fa fa-minus-square-o"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('wrap')" title="自动换行">
          <i class="fa" ng-class="{'fa-toggle-on': vm.toggleWrap, 'fa-toggle-off': !vm.toggleWrap}"></i></button>
        <button class="btn btn-default" ng-click="vm.save()" ng-disabled="!(vm.status.enabled && vm.status.changed)"
            title="保存"><i class="fa fa-save"></i></button>
        <button class="btn btn-default" ng-click="vm.toggleView(true)" title="预览与编辑"><i class="fa fa-eye"></i></button>
        <button class="btn btn-default" ng-click="vm.toggleFullScreen()" title="{{vm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i></button>
        <div class="btn btn-default btn-draggable" title="拖拽"><i class="fa fa-arrows"></i></div>
      </div>
    </div>
    <div class="x-editor-tool x-goto-top hidden">
      <div class="x-toolbar">
        <button type="button" class="btn btn-default btn-circle btn-lg" ng-click="vm.gotoTop()" title="回到顶部">
          <i class="fa fa-arrow-up"></i></button>
      </div>
    </div>
  </script>
</div>
